<template>
  <div class="page-container">
    <h3>计算属性</h3>
    <span>R:</span>
    <input type="text" v-model.number="r" />
    <span>G:</span>
    <input type="text" v-model.number="g" />
    <span>B:</span>
    <input type="text" v-model.number="b" />
    <button @click="show">打印结果</button>
    <div class="rgb-container" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <hr />
  </div>
</template>

<script>
export default {
  name: "Computed",
  data() {
    return {
      r: 0,
      g: 0,
      b: 0,
    };
  },
  // 所有计算属性都应该被定义到computed节点下
  // 计算属性在定义的时候，要定义成方法格式，返回处理后的数据
  computed: {
    rgb() {
      return `rgb(${this.r}, ${this.g}, ${this.b})`;
    },
  },
  methods: {
    show() {
      console.log("rgb===>", this.rgb);
    },
  },
};
</script>

<style lang="scss">
.rgb-container {
  height: 100px;
  width: 150px;
}
</style>
